<template>
<view class="moblie-login">
    <view class="login-t">验证码登录</view>
    <view class="login-input">
      <input @input="setMobile" :value="bindMobile" placeholder="请输入手机号码" type="number" placeholder-class="place-holder"></input>
      <image @tap="closeFun" v-if="close" src="/static/images/gray_close.png"></image>
    </view>
    <view class="login-input">
      <input @input="setCode" placeholder="请输入验证码" type="number" placeholder-class="place-holder"></input>
      <view class="setCode">
        <text></text>
        <view @tap="getCode" v-if="!setcode">立即发送</view>
        <view v-else class="repeat">重新发送 ({{countDownNum}}s)</view>
      </view>
    </view>
    <view class="agreement">
      <view @tap="agreeFun" v-if="!agree" class="image"></view>
      <image @tap="agreeFun" v-else src="/static/images/agree_t.png"></image>
      <view>同意<text @tap="agreement">《登录注册协议》</text></view>
    </view>
     <button :class="'login-bth ' + (login_flag==1?'login-flag':'')" @tap="login" form-type="submit">登录</button>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      bindMobile: '',
      //手机号
      bindCode: '',
      //验证码
      agree: true,
      //是否同意
      login_flag: 0,
      //是否可登录
      close: false,
      //关闭按钮是否显示
      setcode: false,
      //发送验证码
      countDownNum: '60' //倒计时初始值
      ,
      timer: "",
      webUrl: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    app.globalData.getConfig(function (res) {
      var sms_time_out = common.getConfigByName(res.config, 'sms_time_out');

      if (sms_time_out > 0) {
        that.setData({
          countDownNum: sms_time_out
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 倒计时缓存
    var that = this;
    uni.getStorage({
      key: 'code_time',

      success(res) {
        that.setData({
          countDownNum: res.data,
          setcode: true
        });
        that.countDown();
      }

    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 监听手机号输入
    setMobile: function (e) {
      this.bindMobile = e.detail.value;

      if (this.bindMobile.length > 0) {
        this.setData({
          close: true
        });
      } else {
        this.setData({
          close: false
        });
      }

      this.login_flagFun();
    },
    //清空手机号
    closeFun: function () {
      this.setData({
        bindMobile: " ",
        close: false,
        login_flag: 0
      });
    },
    // 监听验证码输入
    setCode: function (e) {
      this.bindCode = e.detail.value;
      this.login_flagFun();
    },
    // 登录是否可点击
    login_flagFun: function () {
      if (this.bindMobile.length > 0 && this.bindCode.length > 0 && this.agree == true) {
        this.setData({
          login_flag: 1
        });
      } else {
        this.setData({
          login_flag: 0
        });
      }
    },
    // 发送验证码
    getCode: function (e) {
      var that = this;

      if (that.bindMobile == '') {
        app.globalData.showTextWarining("请输入手机号码");
        return false;
      }

      console.log(that.bindMobile.length);

      if (that.bindMobile.length != 11) {
        app.globalData.showTextWarining("请输入正确的手机号码");
        return false;
      }

      common.sendSmsCode(that.bindMobile, null, function (res) {
        if (res.data.status == 1) {
          that.setData({
            setcode: true
          });
          that.countDown();
        }
      });
    },
    //登录注册
    login: function () {
      var that = this;

      if (that.bindMobile == '') {
        app.globalData.showTextWarining("请输入手机号码！");
        return false;
      }

      if (that.bindCode == '') {
        app.globalData.showTextWarining("请输入短信验证码！");
        return false;
      }

      if (that.bindCode.length != 4) {
        app.globalData.showTextWarining("验证码错误！");
        return false;
      }

      if (that.agree != true) {
        app.globalData.showTextWarining("未同意注册协议！");
        return false;
      }

      request.post('/api/user/login_mobile', {
        data: {
          mobile: that.bindMobile,
          code: that.bindCode
        },
        success: function (res) {
          app.globalData.showSuccess('登录成功', function () {
            uni.setStorageSync('app:userInfo', res.data.result);
            uni.setStorageSync('isAuth', true);
            app.globalData.userInfo = res.data.result;
            app.globalData.wechatUser = res.data.result;
            app.globalData.userInfo.head_pic = common.getFullUrl(app.globalData.userInfo.head_pic);
            uni.removeStorageSync('bind_third_login');
            uni.navigateBack({
              delta: 2
            });
          });
        }
      });
    },
    // 是否同意协议
    agreeFun: function () {
      var that = this;
      this.setData({
        agree: !that.agree
      });
      this.login_flagFun();
    },
    // 倒计时
    countDown: function () {
      var that = this;
      var countDownNum = that.countDownNum;
      that.setData({
        timer: setInterval(function () {
          if (countDownNum == 0) {
            uni.clearStorage("code_time");
            clearInterval(that.timer);
            that.setData({
              setcode: false,
              countDownNum: 60
            });
            return;
          } else {
            countDownNum--;
            that.setData({
              countDownNum: countDownNum
            });
          }

          uni.setStorage({
            key: 'code_time',
            data: that.countDownNum
          });
        }, 1000)
      });
    },
    //注册协议
    agreement: function (e) {
      var webUrl = "/Api/Article/agreement/doc_code/agreement";
      this.setData({
        webUrl: webUrl
      });
      uni.navigateTo({
        url: '/pages/index/webview/webview'
      });
    }
  }
};
</script>
<style>
page{
  background: #fff;
}
.moblie-login{
  width: 610rpx;
  margin-left: 70rpx;
  color: #333;
}
.login-t{
    height: 72rpx;
    line-height: 72rpx;
    font-size: 48rpx;
    margin: 60rpx 0;
}
.login-input{
  position: relative;
  height: 100rpx;
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #E6E6E6;
  color: #333;
  font-size: 36rpx;
}
.place-holder{
  font-size: 30rpx;
  color: #CCC;
}
.login-input input{
  height: 100rpx;
}
.login-input image{
  position: absolute;
  right: 0;
  top:32rpx;
  width: 36rpx;
  height: 36rpx;
  z-index: 999;
}
.setCode{
  position: absolute;
  right: 0;
  top:0;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  z-index: 999;
}
.setCode view{
  padding-left: 20rpx;
}
.setCode text{
  position: absolute;
  left: 0;
  top:26rpx;
  width:2rpx;
  height:48rpx;
  background:rgba(230,230,230,1);
}
.setCode .repeat{
  color: #999;
}
.agreement{
  display: flex;
  align-items: center;
  color: #666;
  font-size: 24rpx;
}
.agreement image{
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.agreement .image{
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 4rpx;
}
.agreement text{
  color: #999;
}
.login-bth{
  width:610rpx;
  height:90rpx;
  line-height: 90rpx;
  text-align: center;
  background:rgba(204,204,204,1);
  border-radius:45rpx;
  font-size: 30rpx;
  color: #fff;
  margin-top: 100rpx;
}
.login-bth::after{
  border: none;
}
.login-flag{
  background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
}
</style>